<template>
  <el-row class="timeSpan">
    <el-col :span="18">
      <el-date-picker
        v-model="chioseDate"
        type="date"
        placeholder="选择日期"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        @change="refreshVal"
      />
    </el-col>
    <el-col :span="6">
      <el-select v-model="timeSpan" placeholder="选择时段" @change="refreshVal">
        <el-option label="全天" :value="0" />
        <el-option label="上午" :value="8" />
        <el-option label="下午" :value="16" />
      </el-select>
    </el-col>
  </el-row>
</template>

<script>
import moment from 'moment'
export default {
  components: {
  },
  props: {
    value: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      chioseDate: null,
      timeSpan: 0
    }
  },
  computed: {
  },
  watch: {
    value: {
      handler(val) {
        if (val != null && val !== '') {
          this.reset()
        } else {
          this.chioseDate = null
          this.timeSpan = 0
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    refreshVal() {
      let val = null
      if (this.chioseDate != null) {
        val = this.chioseDate + ' ' + this.timeSpan + ':0:0'
      }
      this.$emit('input', val)
      this.$emit('change', val)
    },
    reset() {
      const t = moment(this.value)
      this.chioseDate = t.format('YYYY-MM-DD')
      this.timeSpan = t.hour()
    }
  }
}
</script>
<style scoped>
.timeSpan {
  width: 100%;
}
.timeSpan .el-date-editor {
  width: 100%;
}
.timeSpan .el-select {
  width: 100%;
}
</style>
